<template>
  <div class="exchange-center" v-if="designerInfo">
    <div>
      <div class="top">
        <span class="level-name">至尊会员</span>
        <span class="num">
          {{ designerInfo.score }}
          <span class="unit">积分</span>
        </span>
      </div>
      <div class="content">
        <div class="tab-box">
          <div class="tab">
            <div
              class="tab-item"
              v-for="(item, index) of tabArr"
              :key="index"
              :class="{'active': activeIndex === index}"
              @click="tabItemClick(index)"
            >{{item}}</div>
          </div>
          <div class="line"></div>
        </div>
        <Scroll
          class="exchange-scroll"
          ref="scroller"
          :data="goodsList"
          :listenScroll="true"
          :pullUp="true"
          :probeType="3"
          @scrollToEnd="handleScrollToEnd"
        >
          <div>
            <div class="exchange-list" v-if="activeIndex === 0">
              <div v-for="(item, index) of goodsList" :key="index">
                <panel-item-colomn
                  class="list-item"
                  :goodsInfo="item"
                  @click.native="$router.push({path: '/my/exchange-center/integral-goods', query: {id: item.id}})"
                />
              </div>
            </div>
            <div class="exchange-record" v-else>
              <div class="list-item" v-for="(item, index) of goodsList" :key="index">
                <div class="item-top">
                  <span class="time">{{item.created_at }}</span>
                  <span
                    class="status"
                  >{{parseInt(item.delivery_type) === 1 && parseInt(item.status) === 1 ? '未领取' : parseInt(item.delivery_type) === 1 && parseInt(item.status) === 2 ? '兑换成功' : parseInt(item.delivery_type) === 2 && parseInt(item.status) === 1 ? '未发货' :  parseInt(item.delivery_type) === 2 && parseInt(item.status) === 2 ? '兑换成功' : ''  }}</span>
                </div>
                <panel-item-inner
                  :innerGoodsInfo="item"
                  @click.native="$router.push({path: '/my/exchange-center/order-detail', query: {orderId: item.id}})"
                />
              </div>
            </div>
          </div>
        </Scroll>
        <no-result
          :src="require('@/assets/images/2-zwnr.png')"
          :msg="msg"
          v-if="!goodsList.length"
        />
      </div>
    </div>
    <transition name="slide">
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>
import PanelItemColomn from './exchange-center/panel-item-colomn'
import Scroll from '@/components/scroll/scroll'
import PanelItemInner from '@/components/panel-item-inner'
import NoResult from '@/components/no-result/no-result'
import { getIntegralGoodsList, getRecordIntegralGoodsList } from '@/api/my'
import IntegralScore from '@/views/my/mixins/edit-msg'
const ERR_OK = 200
export default {
  components: {
    PanelItemColomn,
    Scroll,
    PanelItemInner,
    NoResult
  },
  mixins: [IntegralScore],
  data () {
    return {
      tabArr: ['全部商品', '兑换记录'],
      activeIndex: 0,
      goodsList: [],
      loading: true,
      page: 1,
      msg: '暂无积分商品~'
    }
  },
  created () {
    this._getIntegralGoodsList(this.page)
  },
  methods: {
    handleScrollToEnd () {
      if (this.loading) {
        this.page++
        this._getIntegralGoodsList(this.page).then(res => {
          this.$notify({
            type: 'success',
            message: `已为您更新${res.data.data.length}条数据`,
            className: 'my-cls',
            duration: 1000
          })
        })
      } else if (!this.loading) {
        this.$notify({
          type: 'warning',
          message: '没有更多内容了~',
          className: 'my-cls',
          duration: 1000
        })
      }
    },
    hasMore () {
      if (this.goodsList.length >= this.total) {
        this.loading = false
      } else {
        this.loading = true
      }
    },
    tabItemClick (index) {
      this.activeIndex = index
      this.$refs.scroller.refresh()
      this.$refs.scroller.scrollTo(0, 0)
      this.page = 1
      this.goodsList = []
      switch (index) {
        case 0:
          this.msg = '暂无积分商品~'
          this._getIntegralGoodsList(this.page)
          break
        case 1:
          this.msg = '暂无兑换记录~'
          this._getRecordIntegralGoodsList(this.page)
          break
      }
    },
    _getIntegralGoodsList (page) {
      getIntegralGoodsList(page)
        .then(res => {
          if (res.code === ERR_OK) {
            this.goodsList = this.goodsList.concat(res.data.data)
            this.total = res.data.total
            this.hasMore()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getRecordIntegralGoodsList (page) {
      getRecordIntegralGoodsList(page)
        .then(res => {
          if (res.code === ERR_OK) {
            this.goodsList = this.goodsList.concat(res.data.data)
            this.total = res.data.total
            this.hasMore()
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
.exchange-center {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  background: #fff;
  padding: 0 0 0 0.36rem;
  box-sizing: border-box;
  touch-action: none;
  .exchange-scroll {
    position: fixed;
    top: 3.3rem;
    left: 0.36rem;
    right: 0.36rem;
    bottom: 0;
    overflow: hidden;
  }
  .top {
    width: 100%;
    padding: 0.7rem 0;
    display: flex;
    align-items: center;
    line-height: 0.64rem;
    border-bottom: 1px solid #000400;
    .level-name {
      font-size: 0.36rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(4, 0, 0, 1);
      padding-right: 0.48rem;
      border-right: 1px solid #e6e7e8;
    }
    .num {
      font-size: 0.6rem;
      font-family: Abel;
      font-weight: 400;
      color: rgba(4, 0, 0, 1);
      padding-left: 0.57rem;
      .unit {
        font-size: 0.22rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(0, 4, 0, 1);
        line-height: 0.22rem;
      }
    }
  }
  .content {
    width: 100%;
    padding-right: 0.36rem;
    box-sizing: border-box;
    font-size: 0;
    position: relative;
    .tab-box {
      position: relative;
      height: 1.25rem;
      display: inline-block;
      .tab {
        display: flex;
        align-items: center;
        height: 100%;
        .tab-item {
          font-size: 0.32rem;
          font-family: PingFang SC;
          font-weight: 300;
          color: rgba(0, 4, 0, 1);
          line-height: 0.38rem;
          &:nth-of-type(1) {
            padding-right: 0.3rem;
          }
          &:nth-of-type(3) {
            padding: 0 0.3rem;
          }
          &.active {
            font-weight: bold;
          }
        }
      }
      .line {
        width: 2px;
        height: 0.38rem;
        background: #000;
        @include center();
      }
    }
    .exchange-list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding-bottom: 0.5rem;
      .list-item {
        margin-bottom: 0.63rem;
      }
    }
    .exchange-record {
      width: 100%;
      .list-item {
        width: 100%;
        padding-bottom: 0.41rem;
        border-bottom: 1px solid rgba(0, 4, 0, 0.3);
        &:last-of-type {
          border-bottom: none;
        }
        .item-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0.38rem 0;
          .time {
            font-size: 0.26rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(68, 68, 68, 1);
            line-height: 0.32rem;
          }
          .status {
            font-size: 0.26rem;
            font-family: PingFang SC;
            font-weight: 600;
            color: rgba(0, 4, 0, 1);
            line-height: 0.32rem;
          }
        }
      }
    }
  }
}
@include slideEnter();
</style>
